<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap Test Page</title>
	</head>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

	<!-- 可选的Bootstrap主题文件（一般不用引入） -->
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<style type="text/css">
		.top-header{
			color:#fff;
			max-height:300px;
			height:300px;
			-color:#ddd;
			-webkit-
			background-size:cover;
			background-size:cover;
			background-repeat:no-repeat}
		.navbar-transparent{
			border-color: transparent;;
		}
		.navbar-top{
			background: rgba(0,0,0,.4);
			border: none;
		}
		.navbar-activity{
			margin-left: -15px;
			color: #F00;
			opacity: .7;
			float: left;;
			padding: 15px 15px;
			font-size: 18px;
			line-height: 20px;
			height: 50px;
		}
		.navbar-activity:hover{
			color: white;
  			background-color: transparent;
		}
		.co-brand{
			float: right!important;
			margin-right: -15px;
		}
		.page-header{
			border-bottom-color: rgba(0,0,0,.1);
			padding-bottom: 9px;
			margin: 50px 0 20px;
			border-bottom:1px solid #eee;
			
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		}
		.individual{
			margin-top: 15px;
			font-size:13px;
			font-weight:400;
		}
		.individual-left{
			display: table-cell;
			color:#ff0000;
		}
		.individual-body{
			display: table-cell;
			vertical-align: top;
		}
		.member-name{
			margin-bottom:5px;
			display:inline-block
		}
		.label-Knight{
			background-color:#ff7500;
		}
		.label-Vince{
			background-color:#2980b9;
		}
		.label-Ivy{
			background-color:#95a5a6;
		}
		.label-Jenney{
			background-color:#e74c3c;
		}
		.label-Roring{
			background-color:#f39c12;
		}
		.member-list .member-item-wrap {
			text-decoration: none;
		}
			a:active, a:hover {
			outline: 0;
		}
		.member-item{
			margin-left: 30px;
			position: relative;
			padding: 30px;
			padding-top: 70px;
			padding-bottom: 20px;
			margin-bottom: 80px;
			border: 2px solid #efefef;
			background-color: #fdfdfd;
		}
		.member-src{
			margin-left: -60px;
			width: 70px;
			border: 3px solid #f1f2f7;
			position: absolute;
			top: -20px;
			margin-left: -33px;
			background-color: #fff;
			-webkit-background-size: cover;
			background-size: cover;
			background-position: center center;
			z-index: 1;
		}
		.member-dep{
			left: 80px;
			position: absolute;
			top: 10px;
			left: 110px;
			right: 10px;
			height: 20px;
			overflow: hidden;
			color: #777;
		}
		.job-title{
			text-align: center;
			font-size: 24px;
			font-weight: 400;
			color: #32323a;
			margin-bottom: 10px;
			min-height: 80px;
			max-height: 80px;
			overflow: hidden;
		}
	</style>

	<body>
		<div id="navbar-top" class="navbar-top navbar navbar-transparent navbar-fixed-top">
			<div class="container">
				<div class="nav-bar-header">
					<a href="#" class="navbar-activity"><h1>Hackthon</h1></a>
				</div>
				<p class="navbar-text navbar-right co-brand hidden-xs">
					<img src="images/Oracle_logo.png" class="navbar-control" height="50px">
				</p>
			</div>
		</div>
		<header id="top-header" class="top-header jumbotron" style="background-image:url(./images/oracle-building.jpeg);">
			<div class="container">
				<div class="row">
					<div class="col-md-8">
						<div class="page-header">
							<h2>Suzhou Team 4 Introduction</h2>
							<p class="lead"><small>Welcome to Suzhou for attending Hackthon</small></p>
						</div>
						<div class="individual">
							<h5 class="individual-left">Personal profile:</h5>
						</div>
						<div class="individual-body">
							<p class="member-name">
								<a target="_blank" href="http://www.baidu.com" class="label label-default label-Knight" onclick="_hmt.push(['_trackEvent', 'member-name', 'click', 'Knight Shao'])">Knight Shao</a>
								<a target="_blank" href="http://www.baidu.com" class="label label-default label-Vince" onclick="_hmt.push(['_trackEvent', 'member-name', 'click', 'Vince Wu'])">Vince Wu</a>
								<a target="_blank" href="http://www.baidu.com" class="label label-default label-Ivy" onclick="_hmt.push(['_trackEvent', 'member-name', 'click', 'Ivy Meng'])">Ivy Meng</a>
								<a target="_blank" href="http://www.baidu.com" class="label label-default label-Jenney" onclick="_hmt.push(['_trackEvent', 'member-name', 'click', 'Jenney Wang'])">Jenney Wang</a>
								<a target="_blank" href="http://www.baidu.com" class="label label-default label-Roring" onclick="_hmt.push(['_trackEvent', 'member-name', 'click', 'Roring Huang'])">Roring Huang</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</header>
		<section class="member-list">
			<div class="container">
				<div class="row">
					<div class="col-sm-6 col-md-4">
						<a href="http://www.baidu.com" class="member-item-wrap" title="Application Engineer" target="_blank" onclick="_hmt.push(['_trackEvent', 'members', 'click', 'AE']">
							<div class="member-item">
								<div class="member-src">
									<img class="img-responsive" src="images/knight.jpg">
								</div>
								<div class="member-dep">Oracle Demantra Development</div>
								<div class="job-title">Application Engineer</div>

							</div>
						</a>
					</div>
				</div>
			</div>
		</section>
	</body>
</html>
